<div>
  <md-progress-linear md-mode="indeterminate" ng-if="vm.loading"></md-progress-linear>
  <div layout="row" layout-align="center start" ng-if="!vm.loading">
    <div layout="column" class="layout-max-width">
      <div style="width:100%" class="" layout="row" layout-align="center start">

          <span style="width:40px;max-width:40px;"></span>
          <md-input-container class="condensed-no-float" md-no-float class="md-block" flex style="margin-top:10px;margin-bottom:-10px;">
            <input ng-model="vm.searchQuery" placeholder="请输入搜索类型的名称">
          </md-input-container>


      </div>
    </div>
  </div>
  <div layout="row" flex class="md-padding feed-categories" layout-align="start start" layout-wrap ng-if="!vm.loading">
    <md-card style="width:400px;max-width:400px;max-height:121px;height:121px" ng-repeat="type in vm.domainTypes | orderBy:'title' | filter: vm.searchQuery track by $index" flex="initial"
             flex-md="initial" flex-sm="50" ng-click="vm.editDomainType(type)">
      <md-card-title>
        <md-card-title-text>
          <span style="font-size: 16px;font-weight:400;letter-spacing:.005em;">{{type.title}}</span>
          <span class="md-subhead category-subheader">{{vm.getAllFieldPolicies(type) | characters:50}}</span>
        </md-card-title-text>
        <md-card-title-media>
          <ng-md-icon icon="{{type.icon}}" size="40" ng-style="{'fill':type.iconColor}" style="margin-right:-20px;" class="md-media-xs"></ng-md-icon>
        </md-card-title-media>
      </md-card-title>
      <md-card-title>
        <md-card-title-text>
        <div style="word-wrap:break-word;color:rgba(0,0,0,0.54);">{{type.description | characters:100}}</div>
        </md-card-title-text>
        <md-card-title-media>
        <button type="button" class="btn btn-default" ><i class="zmdi zmdi-edit"></i></button>
        </md-card-title-media>
      </md-card-title>
    </md-card>
  </div>
</div>
